<template>
	<view class="content">
		
		<view class="rank-bg">
			<uni-notice-bar class="notice" v-if="!userInfo" show-icon text="当前处于【游客模式】点击去登录" @click="handleLogin" />
			<image class="rank" src="/static/rank.png" @click="handleRank"></image>
		</view>

		<view class="item-bg" v-for="(item, index) in list" :key="index" @click="handleItem(item.key)">
			<image class="item-bg-image" :src="item.image"></image>

			<view class="left">
				<view>
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.describe}}</view>
				</view>

				<view class="best">
					<image v-if="!item.best.includes('暂无')" class="best-image" src="/static/cup-list.png"></image>
					<view>{{item.best}}</view>
				</view>
			</view>

			<image class="dot-image" src="/static/go.png"></image>
		</view>


		<view class="tip">
			<view>✓ 玩法提示</view>
			<view>✓ 汉：点击汉字泡泡选择生字</view>
			<view>✓ 拼：再点击对应的拼音泡泡</view>
			<view>✓ 正确配对后泡泡会消失，配对完所有生字即可过关！</view>
			<view>✓ 挑战最快完成时间记录！！！</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	
	const list = ref([{
		image: "https://env-00jxty8ur34a.normal.cloudstatic.cn/static/baby-bg1.png",
		title: "一年级",
		best: "暂无最快记录",
		describe: "基础汉字学习",
		key:"chineseFirst"
	}, {
		image: "https://env-00jxty8ur34a.normal.cloudstatic.cn/static/baby-bg2.png",
		title: "二年级",
		best: "暂无最快记录",
		describe: "常用词语练习",
		key:"chineseSecond"
	}, {
		image: "https://env-00jxty8ur34a.normal.cloudstatic.cn/static/baby-bg3.png",
		title: "三年级",
		best: "暂无最快记录",
		describe: "形容词学习",
		key:"chineseThird"
	}, {
		image: "https://env-00jxty8ur34a.normal.cloudstatic.cn/static/baby-bg4.png",
		title: "四年级",
		best: "暂无最快记录",
		describe: "地理词汇",
		key:"chineseFourth"
	}, {
		image: "https://env-00jxty8ur34a.normal.cloudstatic.cn/static/baby-bg5.png",
		title: "五年级",
		best: "暂无最快记录",
		describe: "科学词汇",
		key:"chineseFifth"
	}])
	const userInfo = ref()

	onShow(() => {
		for (var i = 0; i < list.value.length; i++) {
			try {
				const value = uni.getStorageSync("leaderboard");
				if (value) {
					if(value[list.value[i].key]){
						list.value[i].best = "最快记录"+formatTime(value[list.value[i].key])
					}
				}
			} catch (e) {
				console.log(e)
			}
		}
		
		try {
			const value = uni.getStorageSync("userInfo");
			if (value) {
				userInfo.value = value
			}
		} catch (e) {
			console.log(e)
		}
	})
	
	// 格式化时间显示（将秒转换为分:秒格式）
	const formatTime = (seconds) => {
		const minutes = Math.floor(seconds / 60)
		const remainingSeconds = seconds % 60
		return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
	}

	function handleItem(key) {
		uni.navigateTo({
			url: "/pages/baby/chinese/baby1/index?key="+key
		})
	}
	
	function handleLogin(){
		uni.switchTab({
			url: '/pages/my/my'
		});
	}
	
	function handleRank(){
		if(!userInfo.value){
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			return
		}
		uni.navigateTo({
			url:"/pages/my/rank/rank"
		})
	}
</script>

<style>
	@import "index.css"
</style>